<template>
    <div>
        <el-main>
        <div class="content-box">
          <h3>欢迎使用幸福小区管理系统</h3>
          <el-divider />
          <div class="dashboard-cards">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-card shadow="hover">
                  <div class="card-value":="value1">{{ value1 }}</div>
                  <div class="card-title">总住户数</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover">
                  <div class="card-value" :="value2">{{ value2 }}</div>
                  <div class="card-title">本月新增</div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover">
                  <div class="card-value":="value3">{{ value3 }}</div>
                  <div class="card-title">缴费率</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-main>
    </div>
</template>

<script setup>
import { ref } from 'vue'
 const value1 = ref(1000)
 const value2 = ref(500)
 const value3 = ref(0.8)
</script>

<style lang="scss" scoped>

</style>